<template>
	<view>
		cateId:{{cateId}}
		<!-- 1. 轮播区域 -->
		<Banner :banner="cateObj.category.bannerUrlList"></Banner>
		<!-- 	<swiper>
			<swiper-item v-for="(item,index) in cateObj.category.bannerUrlList" :key='index'>
				<image :src='item'></image>
			</swiper-item>
		</swiper> -->
		<!-- 2.信息介绍说明 -->
		<view class="info">
			<view class="myTitle">
				{{cateObj.category.frontName}}
			</view>
			<view class="mysubTitle">
				{{cateObj.category.name}}
			</view>
		</view>

		<!-- 3. 商品展示列表 -->
		<view class="list">
			<view class="item" v-for="item in cateObj.itemList" :key='item.id' @click="toDetail(item)">
				<image :src="item.listPicUrl" class="item-img" mode=""></image>
				<view class="title">
					{{item.name}}
				</view>
				<view class="price">
					￥{{item.retailPrice}}
				</view>
			</view>


		</view>
		<!-- 4. 返回顶部 -->
		<view class="goTop" v-if="isShow" @click="goTop">
			返回
		</view>
	</view>
</template>

<script>
	export default {
		name: "MenuCate",
		props: ['cateId','scrollTop'],
		data() {
			return {
				isShow: false, //返回按钮是否显示
				indexCateList: [], //所有的导航分类数据信息[{},{},{}]
				//分析：数据需要筛选的 ---数据遍历数据方法
				//indexCateList[i].category.parentId 信息标识 == this.cateid点击的导航分类id 匹配 这个数据是想要的数据{ }
			};
		},
		//计算属性 筛选想要的数据
		computed: {
			cateObj() {
				// return this.indexCateList.find(ele=>ele.category.parentId == this.cateId);
				let obj = this.indexCateList.find(ele => ele.category.parentId == this.cateId)
				console.log('obj---', obj);
				return obj;
			}
		},
		//监听滚动的高度----方法1：--监听滚动高度
		watch:{
			scrollTop(val){
				if(val>=200){
					this.isShow = true;
				}else{
					this.isShow = false;
				}
			}
		},
		created() {
			// console.log('uni---',uni.$base,uni.$http);
			this.getIndexCateList();
			//监听uni的数据-滚动数据--方法2：监听滚动高度
			uni.$on('paseScroll',data=>{
				console.log('uni.$on----',data);
				if(data>=200){
					this.isShow = true;
				}else{
					this.isShow = false;
				}
			})
		},
		// mounted(){
		// 	uni.$on('paseScroll',data=>{
		// 		console.log('uni.$on----',data);
		// 	})
		// },
		//监听页面滚动事件
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			console.log("页面滚动了")
			console.log("滚动距离为：" + e.scrollTop);
		},
		methods: {
			//获取导航分类产品信息-----------------
			async getIndexCateList() {
				let res = await uni.$http(uni.$base.indexCateList)
				console.log('导航分类产品信息---', res.indexCateList);
				this.indexCateList = res.indexCateList;
			},
			//点击商品--跳转商品详情界面--------------- 
			toDetail(item) {
				console.log('item---', item);
				uni.navigateTo({
					url: '../detail/detail?goodsInfo=' + JSON.stringify(item)
				})
			},
			//点击返回顶部操作---------------
			goTop() {
				console.log('点击返回顶部----');
				uni.pageScrollTo({
					scrollTop: 0, //scrollTop	Number	否	滚动到页面的目标位置（单位px）
					duration: 300, //duration	Number	否	滚动动画的时长，默认300ms，单位 ms
				})
			},
			//
		}
	}
</script>

<style lang="scss" scoped>
	.goTop {
		position: fixed;
		right: 20rpx;
		bottom: 20rpx;
		background: rgba(0, 0, 0, 0.4);
		font-size: 12px;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
	}

	.info {
		margin: 20rpx;
		text-align: center;

		.myTitle {
			font-size: 40rpx;
		}

		.mysubTitle {
			color: #666;
		}
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		justify-content: space-between;

		.item {
			width: 344rpx;
			margin-bottom: 20rpx;

			.item-img {
				width: 344rpx;
				height: 344rpx;
			}

			.title {
				color: #666;
				margin-bottom: 10rpx;
				white-space: nowrap;
				overflow: hidden; //文本超出隐藏
				text-overflow: ellipsis; //文本超出省略号替代
			}

			.price {
				color: #ff5555;
			}
		}
	}
</style>
